<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>ABCDessin</title>

	<link rel="stylesheet" href="jquery.mobile.custom/custom.css" />
	<link rel="stylesheet" href="jquery.mobile/jquery.mobile.structure-1.2.0.css" />
	<link rel="stylesheet" href="css/icons-pack/jqm-icons.css" />
	<link rel="stylesheet" href="css/style.css" />
	
    <script src="jquery.mobile/jquery-1.7.2.min.js"></script>
	<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
	
	<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
    <script type="text/javascript" charset="utf-8" src="apis/media.js"></script>
    <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
    
	<script type="text/javascript" charset="utf-8" src="js-project/image-handler.js"></script>
	<script type="text/javascript" charset="utf-8" src="js-project/song-handler.js"></script>
	<script type="text/javascript" charset="utf-8" src="js-project/bdd-handler.js"></script>
    
	<script type="text/javascript" charset="utf-8" src="index.js"></script>

	<script type="text/javascript">
		var myScoreManager = new scoreManager();
        pageManager = null;
		$(document).ready(function() {
	    	// Initialiseur du manager de la page
			pageManager = new pageApprentissage();
			pageManager.initialize();
		});
	</script>
  
	<!-- CDN Respositories: For production, replace lines above with these uncommented minified versions -->
	<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
	<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>-->
	<!-- <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
	</head>
  <body>
	<div id="page" data-role="page" id="page-apprentissage" class="type-interior"  style="background-image:url(media/images/background1.jpg);background-size:100% 100%;">
		<div data-role="header" >
			<h1>Apprentissage</h1>
	 		<a href="index.html" rel="external"  data-icon="home" data-iconpos="notext" id="intro" class="ui-btn-right">Accueil</a>
		</div>
		<div id="content" data-role="content"  style="background:none;">
			<div id="diapo">
				<div id="diapo_control" data-role="controlgroup" data-type="horizontal">
					<button data-icon="step-backward" onclick="pageManager.toPreviousLetter();">&nbsp</button>
					<button data-icon="step-forward"  onclick="pageManager.toNextLetter();">&nbsp</button>
					<button data-icon="stop" onclick="pageManager.stop();">&nbsp</button>
					<button data-icon="play" onclick="pageManager.play();">&nbsp</button>
				</div
				<div id="diapo-display">
					<div id="maj_letter_display" class="bigDisplay" onclick="pageManager.readLetter();"></div>
					<div class="lineBloc">
						<div style="height:200px" id="min_letter_display" class="mediumDisplay" onclick="pageManager.readLetter();"></div>
						<div style="height:200px" id="cur_letter_display" class="mediumDisplay" onclick="pageManager.readLetter();"></div>
					</div>
				</div>
			</div>
		</div>	
	</div>			
  </body>
</html>